<template>
  <!-- 建筑工程设计资质类型 -->
  <div>
    <img width="100%" src="~/assets/img/m_jzgszr_banner.jpg" alt="">

    <section class="chjjzzz_top">
      <h3>精选建筑资质服务<span>建筑工程设计、招投标、施工等业务必备</span></h3>
       <ul class="chjjzzz_toplist af">
         <li v-for="(item,index) in service" :key="index" :class="index==sele1?'on':''" @mouseover="sele1=index">{{item.tit}}</li>
       </ul>
     <div class="chjjzzz_top_con" v-if="sele1==0">
        <div class="ri">
          <ul class="ri_list af">
            <li v-for="(item,index) in list1"><a style="color: #252129;" href="/Mobile/ArchitectureDetails/jzgszcb">{{item.tit}}</a></li>
          </ul>
        </div>
     </div>
     <div class="chjjzzz_top_con" v-if="sele1==1">
        <div class="ri">
          <ul class="ri_list af">
            <li v-for="(item,index) in list2"><a style="color: #252129;" href="/Mobile/ArchitectureDetails/jzgszxcb">{{item.tit}}</a></li>
          </ul>
        </div>
     </div>
     <div class="chjjzzz_top_con"  v-if="sele1==2">
        <div class="ri">
          <ul class="ri_list af">
            <li v-for="(item,index) in list3"><a style="color: #252129;" href="/Mobile/ArchitectureDetails/jzgcsjzz">{{item.tit}}</a></li>
          </ul>
        </div>
     </div>
    </section>

    <!-- 建筑工程设计资质类型 -->
    <div style="height: 0.2rem;background: #F2F2F5;"></div>
    <section class="sy sy8">
      <h3>服务精英推荐</h3>
      <div class="two zb">
        <ul class="ct zb">
          <li v-for="(data,id) in title.gj" :key="id" :class="'li'+id" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+data.avatar+') no-repeat 0rem 0/3.4rem 2.69rem',width:'3.2rem',height:'2.69rem'}">
            <div class="top">
              <h4>{{data.username}}</h4>
              <p class="p2">经营资质顾问</p>
              <p class="p3">{{data.mobile}}</p>
            </div>
            <a @click="chj_gj(data,id)" href="JavaScript:;">立即咨询</a>
          </li>
        </ul>
      </div>
    </section>

    <!-- 案例展示 -->

      <div style="height: 0.2rem;background: #F2F2F5;"></div>
      <div class="m_alzs">
        <p class="title">案例展示</p>
        <ul class="af">
          <li><img src="~/assets/img/m_alzsimg1.png" alt=""></li>
          <li><img src="~/assets/img/m_alzsimg2.png" alt=""></li>
          <li><img src="~/assets/img/m_alzsimg3.png" alt=""></li>
          <li><img src="~/assets/img/m_alzsimg4.png" alt=""></li>
          <li><img src="~/assets/img/m_alzsimg5.png" alt=""></li>
        </ul>
      </div>

    <!-- 案例展示 -->
    <!-- 建筑资质升级 常规办理材料 -->
        <div class="mzzsj_blcl">
          <h3>资质转让所需资料</h3>
          <ul class="mzzsj_list">
            <li>企业资质申请表</li>
            <li>改制、重组、分立等<br>方案</li>
            <li>企业营业执照副本</li>
            <li>原企业营业执照副本</li>
            <li>原企业资质证书</li>
            <li>国有企业职工代表大会<br>的决议</li>
            <li class="last">企业股东（代表）大会、董事会的决议复印件</li>
          </ul>
        </div>
    <!-- 建筑资质升级 常规办理材料 -->

     <!-- 转让流程开始 -->
        <div class="m_m_main">
                 <div class="m_xqzc">


                 <div class="xqzc2">
                     <h3>建筑资质转让流程</h3>
                     <div class="ct af">
                       <div class="left">
                         <img src="~/assets/img/xqzc2bg.png" width="153" height="153">
                       </div>
                       <div class="rt">
                         <ol>
                           <li class="li1">客户通过网络或电话业务咨询</li>
                           <li class="li2">客户约谈见面，确定企业当前情况</li>
                           <li class="li3">双方签署代理合同，为客户提供服务</li>
                           <li class="li4">区建委到现场核查并，等待区建委的通知</li>
                           <li class="li5">携带卷宗和原件到区建委初审</li>
                           <li class="li6">市建委受理抽查人员到岗</li>
                           <li class="li7">携带领取通知书到区建委领取证书</li>
                           <li class="li8">与客户交接证书，签订尾款结算单</li>
                           <li class="li9">根据建委要求整理卷宗，并收集所需资料</li>
                         </ol>
                       </div>
                     </div>
                   </div>
                   </div>
                </div>
     <!-- 转让流程结束 -->
    <!--热门服务  -->
       <MJZGSRMFW></MJZGSRMFW>
    <!-- 热门服务 -->

    <section class="sy sy9" style="margin-top: .18rem">
      <h3>用心对待<span>一个互联网服务品牌 企业服务智能升级的实践者</span> <em @click="more()">更多</em></h3>
      <ul>
        <li><img src="~/assets/img/m-sy91.png">
          <p>快速响应</p>
        </li>
        <li><img src="~/assets/img/m-sy92.png">
          <p>信息安全</p>
        </li>
        <li><img src="~/assets/img/m-sy93.png">
          <p>进度掌握</p>
        </li>
        <li><img src="~/assets/img/m-sy94.png">
          <p>专属服务</p>
        </li>
        <li><img src="~/assets/img/m-sy95.png">
          <p>提供售后</p>
        </li>
      </ul>

    </section>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  import MJZGSRMFW from '~/components/mjzgsrmfw.vue'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        gjname: ['工商服务顾问', '财税记账顾问', '商标知产顾问', '社保人事顾问', '社保人事顾问', '资质商城顾问', '工商服务顾问', '工商服务顾问', '财税记账顾问', '财税记账顾问'],
        sele1:0,
        service:[
          {tit:"施工总承包资质"},
          {tit:"施工专业承包资质"},
          {tit:"建筑行业设计资质"}
        ],
        list1:[
          {tit:'建筑工程总承包',},
          {tit:'市政总承包资质',},
          {tit:'机电工程总承包资质',},
          {tit:'电力施工总承包资质',},
          {tit:'通信施工总承包资质',}
          ],
          list2:[
            {tit:'装饰装修资质',},
            {tit:'钢结构工程资质',},
            {tit:'消防设施工程资质',},
            {tit:'建筑机电安装资质',},
            {tit:'防水防腐保温资质',},
            {tit:'环保工程资质',},
            {tit:'输变电资质',},
            {tit:'电子与智能化资质',},
            {tit:'建筑幕墙资质',},
            {tit:'地基基础资质',},
            {tit:'起重设备安装资质',},
            {tit:'古建筑资质',},
          ],
          list3:[
            {tit:'建筑智能化设计资质',img:'jz_jzhyi1.png'},
            {tit:'环境工程设计资质',img:'jz_jzhyi2.png'},
            {tit:'钢结构设计资质',img:'jz_jzhyi3.png'},
            {tit:'工程勘察专业资质',img:'jz_jzhyi4.png'},
            {tit:'工程设计专项资质',img:'jz_jzhyi5.png'},
            {tit:'建筑幕墙设计资质',img:'jz_jzhyi6.png'},
            {tit:'工程设计综合资质',img:'jz_jzhyi7.png'},
            {tit:'工程勘察综合资质',img:'jz_jzhyi8.png'},
            {tit:'建筑装饰设计资质',img:'jz_jzhyi9.png'},
            {tit:'照明工程设计资质',img:'jz_jzhyi10.png'},
            {tit:'工程勘察劳务资质',img:'jz_jzhyi11.png'},
            {tit:'风景园林工程设计资质',img:'jz_jzhyi12.png'},
            {tit:'消防设施工程设计资质',img:'jz_jzhyi13.png'},
          ],
        zzfw:[
          {img:'cjjzz2_i1.png',tit:'施工劳务资质'},
          {img:'cjjzz2_i2.png',tit:'安全生产许可证'},
          {img:'cjjzz2_i3.png',tit:'异地进京备案'},
          {img:'cjjzz2_i4.png',tit:'建筑公司代理记账'},
          {img:'cjjzz2_i5.png',tit:'建筑公司注册'},
          {img:'cjjzz2_i6.png',tit:'建筑公司注销'},
          {img:'cjjzz2_i7.png',tit:'资质转让'},
          {img:'cjjzz2_i8.png',tit:'资质升级'},
          {img:'cjjzz2_i9.png',tit:'资质延期'}
          ]
      }
    },
    async asyncData({
      params
    }) {

      let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
      let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Service/serviceDetailsData`, {
        params: {
          serviceid: params.id
        }
      });
      let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`, {
        params: {
          serviceid: params.id
        }
      });
      let nh5 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Service/popularData`);

      let nh6 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/QybDetailImg/getQybDetailImg`, {
        params: {
          threeid: params.id,
          //      twoid:this.$route.query.name
        }
      });

      let data = {
        nav: nh.data,
        xqdata: nh3.data,
        gj: nh4.data,
        rmfw: nh5.data,
        imgurl: nh6.data
      };
      return {
        title: data
      }
    },
    head() {
      return {
        title: '建筑公司资质转让',
        meta: [{
            hid: 'description',
            name: 'description',
            content: '建筑公司资质转让'
          },
          {
            hid: 'keywords',
            name: 'keywords',
            content: '建筑公司资质转让'
          }
        ]
      }
    },
    components:{
      MJZGSRMFW
    },
    mounted: function() {
      $('header').show();

      function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
          "SymbianOS", "Windows Phone",
          "iPad", "iPod"
        ];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
          }
        }
        return flag;
      }
      if (IsPC()) {
        this.$router.push('/Finance');
      } else {

      }

    },

    methods: {
      xqbg: function(e) {
        $('.qhgj a').removeClass('select');
        $('.qhgj .' + e).addClass('select');
      },
    }
  }
</script>

<style>
  .m_xqzc{
    display: block;
  }
  .m_m_main .m_xqzc .xqzc2 .left{
    margin-top: 0.68rem;
  }
  .m_m_main .m_xqzc .xqzc2 .rt li.li8:before{
    content: "8";
  }
  .m_m_main .m_xqzc .xqzc2 .rt li.li9:before{
    content: "9";
  }
  .m_sjzz1_box h3{
    font-size: 0.36rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #252525;
    padding-left: 0.24rem;
  }
  .m_sjzz1_box h3 span{
    font-size: 0.2rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B4B4B4;
    margin-left: 0.17rem;
  }
  .m_sjzz1 {
    padding-left: 0.24rem;
    padding-right: 0.24rem;
    overflow-x: scroll;
    padding-top: 0.2rem;
    padding-bottom: 0.4rem;
  }

  .m_sjzz1_list {
    display: flex;
    width: 10rem;
  }

  .m_sjzz1_list li {
    width: 2rem;
    height: 1.32rem;
    float: left;
    text-align: center;
    margin-right: 0.14rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.01rem 0.21rem 0rem rgba(194, 194, 194, 0.31);
    border-radius: 0.02rem;
    padding-top: 0.3rem;
  }

  .m_sjzz1_list li img {
    height: 0.6rem;
  }

  .m_sjzz1_list li p {
    font-size: 0.24rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #212529;
  }

  .mobile .sy h3 {
    margin: 0 auto 0;
  }

  .m_alzs {}

  .m_alzs .title {
    font-size: 0.36rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #252525;
    padding-left: 0.24rem;
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
  }

  .m_alzs ul {
    padding-left: 0.24rem;
    padding-right: 0.16rem;
    padding-bottom: 0.4rem;
  }

  .m_alzs ul li {
    width: 1.29rem;
    height: 1.92rem;
    float: left;
    margin-right: 0.16rem;
  }

  .m_alzs ul li img {
    width: 100%;
    height: 100%;
  }

  .m_alzs ul li:last-child {
    margin-right: 0rem;
  }
  .m_rmfw .m_item3{
    margin-top: 0rem;
  }

  .m_alzs {}

  .m_alzs .title {
    font-size: 0.36rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #252525;
    padding-left: 0.24rem;
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
  }

  .m_alzs ul {
    padding-left: 0.24rem;
    padding-right: 0.16rem;
    padding-bottom: 0.4rem;
  }

  .m_alzs ul li {
    width: 1.29rem;
    height: 1.92rem;
    float: left;
    margin-right: 0.16rem;
  }

  .m_alzs ul li img {
    width: 100%;
    height: 100%;
  }

  .m_alzs ul li:last-child {
    margin-right: 0rem;
  }
  .mzzsj_list{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0.24rem;
    flex-wrap: wrap;
    border-top: 0.01rem dashed #EEEEF2;
    padding-bottom: 0.3rem;
  }
  .mzzsj_list li{
    width: 2.2rem;
    height: 0.7rem;
    background: #E4F0FD;
    font-size: 0.2rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    margin-top: 0.2rem;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .mzzsj_list .last{
    width: 100%;
   height: 0.7rem;
   background: #E4F0FD;
  }
  .mzzsj_blcl h3{
    font-size: 0.24rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #252525;
    padding: 0.2rem 0.24rem 0.2rem;
  }
  .mzzsj_blcl h3::before {
      content: "";
      display: inline-block;
      width: 0.11rem;
      height: 0.13rem;
      margin-right: 0.05rem;
      background: url(../../../assets/img/chjm_ljt.png) no-repeat center;
      background-size: 100% 100%;
  }
  .chjjzzz_top_con .ri .ri_list{
    padding: 0.45rem 0.5rem;
  }
</style>
